<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 数学计算案例 -->
    <h1>四则运算</h1>
    <input type="text" id="num1">
    <input type="text" id="sign">
    <input type="text" id="num2">
    <input type="text" id="result">
    <button>开始计算</button>
    <script>
        var num1 = document.querySelector("#num1")
        var sign = document.querySelector("#sign")
        var num2 = document.querySelector("#num2")
        var result = document.querySelector("#result")
        var btn = document.querySelector("button")
        console.log(num1,sign,num2,result,btn) //返回值是dom对象
        btn.onclick = function(){
            var n= Number(num1.value)  //将字符串类型转换成数字类型
            var m= Number(num2.value)
            var r= count(n,sign.value,m)
            result.value = r
        }
        function count(n,s,m){ //n是第一个数字，s是操作符，m是第二个数
            switch(s){
                case "+" :return n+m ;break; 
                case "-" :return n-m ;break;
                case "*" :return n*m ;break;
                case "/" :return n/m ;break;
            }
        }
    </script>
</body>
</html>